import React from "react";
import { toJS } from "mobx";
import { inject, observer } from "mobx-react";
import { DropTarget } from 'react-dnd';
import { dndTypes, dndTargets } from "../../../../constants";
import TableTree from "./TableTree";
import DragPreview from "./DragPreview";
import {WeaLocaleProvider} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;

const spec = {
    drop: (props, monitor) => {
        const didDrop = monitor.didDrop();
        const source = monitor.getItem().node;
        console.log(props)
        // joined table之间drop 和 拖动joined table不做改变 
        if (didDrop || source.id) return;

        props.onDrop(source, {}, dndTargets.WORKSPACE);
    }
};

const collect = (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    getItem: monitor.getItem(),
    isOver: monitor.isOver()
});

@DropTarget([dndTypes.TABLE, dndTypes.JOINED_TABLE], spec, collect)
@observer
export default class Workspace extends React.Component {
    state = {
        highlight: false
    };
    componentWillReceiveProps(nextProps) {
        if ('isOver' in nextProps) {
            this.setState({ highlight: nextProps.isOver });
        }
    }

    render() {
        const { connectDropTarget, store } = this.props;
        const { treeData, onTableAdd, onTableRemove, onNodeOptClick, onRelatedFieldsChange, onJoinTypeChange} = store;
        const { highlight } = this.state;
        return connectDropTarget(
            <div className={`edc-ds-config ${highlight ? 'edc-ds-config-highlight' : ''}`}>
                {(!treeData || !treeData.length) &&
                    <div className='edc-ds-blank'>
                        {getLabel(502691,'请将左侧的表拖入工作区')}
                    </div>

                }
                <TableTree ecId={`${this && this.props && this.props.ecId || ''}_TableTree@fd090j`}
                    data={treeData}
                    onDrop={onTableAdd}
                    onRemove={onTableRemove}
                    onNodeOptClick={onNodeOptClick}
                    onJoinTypeChange={onJoinTypeChange}
                    onRelatedFieldsChange={onRelatedFieldsChange}
                />
                <DragPreview ecId={`${this && this.props && this.props.ecId || ''}_DragPreview@gt7yl3`} />
            </div>
        );
    }
}